<template>
  <div class="home row">
    <div class="col-md-3">
      <span class="hipster img-fluid rounded"></span>
    </div>
    <div class="col-md-9">
      <h1 class="display-4">{{ t$('home.title') }}</h1>
      <p class="lead">{{ t$('home.subtitle') }}</p>

      <div>
        <div class="alert alert-success" v-if="authenticated">
          <span v-if="username">{{ t$('home.logged.message', { username }) }}</span>
        </div>

        <div class="alert alert-warning" v-if="!authenticated">
          <span>{{ t$('global.messages.info.authenticated.prefix') }}</span>
          <a class="alert-link" @click="<% if (authenticationTypeOauth2) { %>login<% } else { %>showLogin<% } %>()">{{ t$('global.messages.info.authenticated.link') }}</a
          ><span v-html="t$('global.messages.info.authenticated.suffix')"
            >, you can try the default accounts:<br />- Administrator (login="admin" and password="admin") <br />- User (login="user" and
            password="user").</span
          >
        </div>
<%_ if (generateUserManagement) { _%>
        <div class="alert alert-warning" v-if="!authenticated">
          <span>{{ t$('global.messages.info.register.noaccount') }}</span>&nbsp;
          <router-link class="alert-link" to="/register"
            >{{ t$('global.messages.info.register.link') }}</router-link
          >
        </div>
<%_ } _%>
      </div>

      <p>{{ t$('home.question') }}</p>

      <ul>
        <li><a href="<%- hipsterDocumentationLink %>" target="_blank" rel="noopener noreferrer"
>{{ t$('home.link.homepage') }}</a></li>
        <li>
          <a href="<%- hipsterStackoverflowLink %>" target="_blank" rel="noopener noreferrer"
>{{ t$('home.link.stackoverflow') }}</a>
        </li>
        <li>
          <a href="<%- hipsterBugTrackerLink %>" target="_blank" rel="noopener noreferrer"
>{{ t$('home.link.bugtracker') }}</a>
        </li>
        <li>
          <a href="<%- hipsterChatLink %>" target="_blank" rel="noopener noreferrer"
>{{ t$('home.link.chat') }}</a>
        </li>
        <li>
          <a href="<%- hipsterTwitterLink %>" target="_blank" rel="noopener noreferrer">{{ t$('home.link.follow') }}</a>
        </li>
      </ul>

      <p>
        <span>{{ t$('home.like') }}</span>
        <a href="<%- hipsterProjectLink %>" target="_blank" rel="noopener noreferrer"
>{{ t$('home.github') }}</a>!
      </p>
    </div>
  </div>
</template>

<script lang="ts" src="./home.component.ts"></script>
